#app {
  background-image: url("~assets/img/setup-bg.webp");
  background-size: cover;
  background-position: bottom;
  transition: 0.4s;
}
#app.cold {
  background-image: url("~assets/img/cold-bg.jpg");
}
#app.warm {
  background-image: url("~assets/img/warm-bg.jpg");
}
main {
  min-height: 100vh;
  padding: 25px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25));
}
.search-box {
  width: 100%;
  margin-top: 35px;
  /* 设置鼠标点击 search-bar 后的样式 */
}
.search-box .search-bar {
  width: 100%;
  display: block;
  padding: 15px;
  /* 设置 search-bar 的字体*/
  color: #313131;
  font-size: 20px;
  /* 清空 search-bar 的样式 */
  appearance: none;
  border: none;
  outline: none;
  background: none;
  /* 设置 search-bar 的背景颜色：透明灰 */
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0px 16px 0px 16px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  transition: 0.4s;
}
.search-box .search-bar:focus {
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 16px 0px 16px 0px;
}
.location-box {
  margin-top: 40px;
}
.location-box .location {
  color: #fff;
  font-size: 32px;
  font-weight: 500px;
  text-align: center;
  text-shadow: 1px 3px rgba(0, 0, 0, 0.25);
}
.location-box .date {
  color: #fff;
  font-size: 20px;
  font-weight: 300px;
  text-align: center;
  font-style: italic;
  margin-top: 9px;
}
.weather-box {
  text-align: center;
}
.weather-box .temp {
  display: inline-block;
  padding: 10px 25px;
  color: #fff;
  font-size: 102px;
  font-weight: 900;
  text-shadow: 3px 6px rgba(0, 0, 0, 0.25);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  margin: 40px 0;
  box-shadow: 3px 6px rgba(0, 0, 0, 0.25);
}
.weather-box .weather {
  color: #fff;
  font-size: 48px;
  font-weight: 700px;
  text-align: center;
  font-style: italic;
  text-shadow: 3px 6px rgba(0, 0, 0, 0.25);
}
